<template>
  <view class="tabs-list">
    <view
      class="tab-item"
      @click="changeTab(index)"
      :class="{ current: index === current }"
      v-for="(item, index) in list"
      :key="index"
      >{{ item.name }}</view
    >
    <view
      class="line"
      :class="{ center: current === 1, right: current === 2 }"
    ></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
    };
  },
  methods: {
    changeTab(index) {
      this.current = index;
      // 通知父页面，切换到了那个标签
      this.$emit("change",index)
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-list {
  display: flex;
  justify-content: space-around;
  line-height: 88rpx;
  font-size: 30rpx;
  color: #676767;
  position: relative;
  .current {
    color: #3d3d3d;
    font-weight: bold;
  }
  .line {
    width: 23.33%;
    margin: 0 5%;
    height: 3rpx;
    background-color: #eb4450;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: left 0.2s;
  }
  .center {
    left: 33.33%;
  }
  .right {
    left: 66.66%;
  }
}
</style>